<template>
	<view class="warpper">
		<u-navbar :title="$t('user.Settings')" :autoBack="false" @leftClick="gotoBack" bgColor="#F6F6F6"
			titleStyle="font-weight: 500; color: #000000;" :placeholder="true">
			<view slot="right" class="done" @click="onDoneHandle">{{
        $t("index.Done")
      }}</view>
		</u-navbar>
		<view class="person-view">
			<image :src="compressPhoto || userInfo.avatarCompress || userInfo.avatar" class="photo" @click="changeAvatar"
				mode="aspectFill" v-if="isPeopleAvatarExit(compressPhoto || userInfo.avatarCompress || userInfo.avatar)" />
			<div class="photo avator-font-setting" :style="{ background: `${userInfo.defaultColor}`, margin: '0 auto'}" v-else
				@click="changeAvatar">{{ (formatUserName(userInfo) || '').slice(0, 1) }}</div>
			<view class="text-view">
				<view class="iconfont icon-xiangji xiangji" @click="changeAvatar"></view>
				<view class="text" @click="changeAvatar">{{
          compressPhoto ? $t("user.Change-Profile-Photo") : $t("user.Set-Profile-Photo")
        }}</view>
			</view>
		</view>
		<view class="name-view">
			<view class="FirstName">
				<input :placeholder="$t('user.First-Name')" v-model="FirstName" />
			</view>
			<view class="FirstName">
				<input :placeholder="$t('user.Last-Namek')" v-model="LastName" />
			</view>
		</view>
		<view class="name-view">
			<view class="number" @click="navigationHandle(1)">
				<view class="number-title">{{ $t("user.Phone-Number") }}</view>
				<view class="number-right">
					<view class="phone">{{ userInfo.userPhone }}</view>
					<view class="iconfont icon-jiantou-you you"></view>
				</view>
			</view>
			<view class="number" @click="navigationHandle(2)">
				<view class="number-title email-container">{{ $t("user.Email") }}</view>
				<view class="number-right">
					<view class="phone">{{ userInfo.email | emailFilter(25) }}</view>
					<view class="iconfont icon-jiantou-you you"></view>
				</view>
			</view>
			<view class="number" @click="navigationHandle(3)">
				<view class="number-title">{{ $t("user.Encoding") }}</view>
				<view class="number-right">
					<view class="phone">{{ userInfo.encoding }}</view>
					<view class="iconfont icon-jiantou-you you"></view>
				</view>
			</view>
		</view>
		<button class="logout" @click="handleLogout">
			{{ $t("user.Log-out") }}
		</button>
		<CustomPopover :show.sync="popoverShow" @confirm="onDoneHandle" @cancel="onCancelSave"></CustomPopover>
	</view>
</template>

<script>
	import {
		queryUserInfo,
		updateUserInfo
	} from "@/services/user";
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		queryLoginOut
	} from "@/services/login";
	import config from "@/config/app.config";
	import {
		removeWatchMessage
	} from '@/utils/RongIM.js'
	// 引入自定义弹窗组件
	import CustomPopover from '@/components/CustomPopover.vue'
import {logoutInterface} from '@/utils/olImInterface.js'

	export default {
		components: {
			CustomPopover
		},
		data() {
			return {
				photo: "",
				compressPhoto: "",
				phone: "+86 185 0000 8888",
				Encoding: "F1G25NBQDX",
				FirstName: "",
				LastName: "",
				Email: "",
				uploadUrl: config.server + "/app/oss/upload",
				popoverShow: false
			};
		},
		filters: {
			emailFilter(email, length) {
				if (!email) return "";
				if (email.length > length) {
					email = email.substr(0, length) + "...";
				}
				return email;
			},
		},
		computed: {
			...mapState(["userInfo", "token"]),
		},
		onShow() {
			this.FirstName = this.userInfo.firstName;
			this.LastName = this.userInfo.lastName;
		},
		methods: {
			...mapActions(["changeUserInfo", "changeToken"]),
			onCancelSave() {
				this.popoverShow = false
				uni.switchTab({
					url: '/pages/user/User'
				});
			},
			// 返回上一页
			gotoBack() {
				if (this.FirstName != this.userInfo.firstName || this.LastName != this.userInfo.lastName || this.compressPhoto) {
					this.popoverShow = true
				} else {
					uni.switchTab({
						url: '/pages/user/User'
					});
				}

			},
			async onDoneHandle() {
				const {
					success
				} = await updateUserInfo({
					firstName: this.FirstName,
					lastName: this.LastName,
					avatar: this.photo || this.userInfo.avatar,
					avatarCompress: this.compressPhoto || this.userInfo.avatarCompress,
				});

				if (success) {
					this.handleUserInfo();
					uni.switchTab({
						url: '/pages/user/User'
					});
				}
			},
			//获取用户信息
			async handleUserInfo() {
				const resp = await queryUserInfo();
				if (!resp.success) return;
				// this.userInfo = resp.result.data;
				this.changeUserInfo(resp.result.data);
			},
			navigationHandle(item) {
				switch (item) {
					case 1:
						uni.navigateTo({
							url: `/pagesUser/setting/PhoneNumber?phone=${this.userInfo.userPhone}`,
						});
						break;
					case 2:
						uni.navigateTo({
							url: `/pagesUser/setting/Email?email=${this.userInfo.email || ""}`,
						});
						break;
					case 3:
						uni.navigateTo({
							url: "/pagesUser/setting/Encoding",
						});
						break;
					default:
						break;
				}
			},
			//退出登录
			async handleLogout() {
				const resp = await queryLoginOut();
				if (!resp.success) return;
				logoutInterface()
				this.changeToken("");
				this.$store.commit("CLEAR_DATA");
				removeWatchMessage()
				
			
				uni.reLaunch({
				  url: "/pages/login/Login",
				});
			},
			// 修改头像回调
			changeAvatar() {
				const that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(chooseImageRes) {
						uni.showLoading();
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.uploadUrl, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: "file",
							header: {
								Authorization: `Bearer ${that.token}`,
								version: config.version,
							},
							formData: {
								user: "upload",
							},
							success: (res) => {
								const resp = JSON.parse(res.data);
								console.log("回调", res, resp);
								if (resp.code == 200) {
									that.photo = resp.data.url;
									that.compressPhoto = resp.data.compressImage;
								}
								uni.hideLoading();
							},
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.warpper {
		padding: 0upx 30upx;
	}

	.done {
		font-size: 28upx;
		font-weight: bold;
		color: #61bdb2;
	}

	.person-view {
		text-align: center;
		margin-top: 60upx;

		.photo {
			width: 150upx;
			height: 150upx;
			border-radius: 50%;
			font-size: 34upx;
			font-weight: bold;
			color: #ffffff;
			text-align: center;
			line-height: 150upx;
		}

		.text-view {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40upx;

			.xiangji {
				color: #61bdb2;
				margin-right: 20upx;
			}

			.text {
				font-size: 30upx;
				font-weight: 400;
				color: #61bdb2;
			}
		}
	}

	.name-view {
		padding: 0upx 30upx;
		background: #ffffff;
		border-radius: 20upx;
		margin-top: 66upx;

		&>view:last-child {
			border-bottom: none;
		}

		.FirstName {
			padding: 43upx 0upx;
			border-bottom: 2upx solid #f6f6f6;
		}

		.number {
			padding: 43upx 0upx;
			border-bottom: 2upx solid #f6f6f6;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.number-title {
				font-size: 30upx;
				font-weight: 400;
				color: hsl(0, 0%, 0%);
			}

			.email-container {
				white-space: nowrap;
			}

			.number-right {
				display: flex;
				align-items: center;

				.you {
					color: #a6a6a6;
				}

				.phone {
					font-size: 30upx;
					font-weight: 400;
					color: #878787;
					margin-right: 30upx;
				}
			}
		}
	}

	.logout {
		margin-top: 40upx;
		width: 100%;
		height: 90upx;
		background: #ffffff;
		border-radius: 20upx;
		font-size: 30upx;
		font-weight: 500;
		color: #fe6600;
		text-align: center;
		line-height: 90upx;

		&::after {
			border: none;
		}
	}
</style>